<template>
  <div>
    <p>count is {{ count }}</p>
    <p>
      <!-- 在template中，通过ref定义的数据，无需.value，因为它会自动解套 -->
      <button @click="count++">+1</button>
    </p>
    <p>count square is {{ countSquare }}</p>
    <p>count square is {{ countSquare }}</p>
    <p>count square is {{ countSquare }}</p>
    <p>
      <!-- 双向数据绑定绑定的是非计算属性 -->
      <input type="text" v-model="name" />&nbsp;&nbsp;
      {{ name }}
    </p>

    <p>
      <!-- 双向数据绑定绑定的是计算属性 -->
      <input type="text" v-model="finalAddress" />&nbsp;&nbsp;
      {{ address }}
    </p>
  </div>
</template>

<script setup>
// Vue3中除了少数几个，少数几个都是以defineXxx，其它用到啥，就要导入啥
import { ref, computed } from 'vue'
const count = ref(1)
const name = ref('')
const address = ref('江西婺源')

// 计算属性中的getter写法
const countSquare = computed(() => {
  // 刚开始会计算一次，后面依赖的值count发生了改变就会重新执行
  console.log('---countSquare---')
  return count.value * count.value
})

// 同时实现计算属性的 setter & getter
const finalAddress = computed({
  get () {
    return address.value
  },
  // 当双向数据绑定的值发生了改变，就会执行
  set (val) {
    console.log('---val---', val)
    address.value = val
  }
})
</script>
